<template>
    <div 
        :class="{
            item: !checked,
            itemActive: checked
        }" >
        <input type="checkbox" 
            :checked="checked"
            @change="$emit('change',$event.target.checked)"
        >
        {{ title }}
        <span @click="$emit('del',index)">
            ✖
        </span>
    </div>
</template>
<script>
export default {
    model:{
        prop: 'checked',
        event: 'change'
    },
    props: {
        checked: {
            type: Boolean,
            default: false
        },
        title: [String,Number],
        index: {
            type: [String,Number],
            default: '',
            // 必填
            immediate: true
        }
    }
}
</script>
<style scoped>
    .item,
    .itemActive{
        height: 35px;
        line-height: 35px;
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-around;
        border-radius: 7px;
        user-select: none;
        margin-bottom: 10px;
        transition: all 0.5s;
        span{
            cursor: pointer;
        }
    }
    .itemActive{
        color: #fff;
        background-color: rgb(255,127,80);
        transform: rotateX(360deg);
    }
</style>